<template>
  <div>
    <div class="common_form_search">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchForm"
      >
        <el-form-item label="店铺名称">
          <el-input
            v-model="searchForm.shopname"
            placeholder="请输入店铺名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="账号">
          <el-input
            v-model="searchForm.account_num"
            placeholder="请输入账号"
            clearable
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchForm.status"
            placeholder="全部"
            clearable
          >
            <el-option
              label="已审核"
              :value="1"
            />
            <el-option
              label="待审核"
              :value="2"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属平台">
          <el-select size="large" style="width:200px" v-model="searchForm.shop_platform">
            <el-option
                label="请选择"
                value=""
            ></el-option>
            <el-option
                v-for="item in selectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="search()"
          >查询</el-button>
          <el-button
            size="small"
            @click="reset()"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider />
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon
          style="margin-right:15px"
          icon-class="list"
          :size="15"
        />数据列表
      </h5>
    </div>
    <el-table
      v-show="tableData.length > -1"
      :data="tableData"
      border
    >
      <el-table-column
        align="center"
        prop="id"
        label="ID"
        width="70"
      />
      <el-table-column
        align="center"
        prop="shopname"
        label="店铺名称"
      />
      <el-table-column
        align="center"
        prop="account_num"
        label="账号"
      />
      <el-table-column
        align="center"
        label="店铺头像"
      >
        <template slot-scope="scope">
          <el-image
            style="width:50px;height:50px"
            fit="fill"
            :src="$globalObj.imgBaseUrl+scope.row.photo"
          >
            <div
              slot="error"
              class="image-slot"
            >
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="people"
        label="联系人姓名"
      />
      <el-table-column
        align="center"
        prop="contact_tel"
        width="120"
        label="联系人手机号"
      />
      <el-table-column
        align="center"
        prop="category_name"
        label="经营项目"
      />
      <el-table-column
        align="center"
        prop="faptype_name"
        label="发票类型"
      />
      <el-table-column
        align="center"
        prop="status"
        label="审核状态"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.status == 1 ? 'success' : scope.row.status == 2 ? 'warning' : 'danger'">{{ scope.row.status == 1 ? "已审核" : scope.row.status == 2 ? "待审核" : "拒绝" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="关闭店铺/开启店铺"
        width="240"
      >
        <template slot-scope="scope">
          <template v-if="scope.row.close_shop == 1">
            <el-button
              size="mini"
              type="primary"
              @click="openShop(scope.row)"
            >
              开启
            </el-button>
          </template>
          <template v-else>
            <el-button
              type="danger"
              size="mini"
              @click="closeShop(scope.row)"
            >
              关闭
            </el-button>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="限制单量"
        width="200"
      >
        <template slot-scope="scope">
          <template v-if="scope.row.close_shop == 0">
            <el-button
              size="mini"
              type="primary"
              @click="limitOrder(scope.row)"
            >
              设置单量({{ scope.row.order_count }})
            </el-button>
          </template>
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="所属平台"
          width="220"
      >
        <template slot-scope="scope">
          <div>
            <el-select @change="(val)=>changePlatform(val,scope.row.id)" size="large" style="width:200px" v-model="scope.row.shop_platform">
              <el-option
                  v-for="item in selectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="是否移交"
        width="100"
      >
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.is_handover"
            active-color="#13ce66"
            :active-value="0"
            :inactive-value="1"
            inactive-color="#ff4949"
            @change="switchWhetherHandOver(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="240"
      >
        <template slot-scope="scope">
          <el-button
            v-if="$hasMethod('#view')"
            type="primary"
            size="mini"
            @click="$router.push({name: 'supplierView',params: { viewId: scope.row.id }})"
          >查看</el-button>
          <el-button
            v-if="$hasMethod('#enable')"
            :type="scope.row.endisable==1?'danger':'warning'"
            size="mini"
            @click="enable(scope.row.id, scope.row.endisable)"
          >{{ scope.row.endisable == 1 ? "禁用" : "启用" }}</el-button>
          <el-dropdown
            v-if="$hasMethod('#edit')"
            @command="command=>handleMore(command,scope.row)"
          >
            <span
              class="el-dropdown-link blue-font pointer"
              style="margin-left:10px"
            >
              更多操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-if="$hasMethod('#edit')"
                command="edit"
              >编辑资料</el-dropdown-item>
              <el-dropdown-item
                v-if="$hasMethod('#setWithdraw')"
                command="setWithdraw"
              >设置提现</el-dropdown-item>
              <el-dropdown-item
                v-if="$hasMethod('#onlinePay')"
                command="onlinePay"
              >线上支付</el-dropdown-item>
              <el-dropdown-item
                v-if="$hasMethod('#offlinePay')"
                command="offlinePay"
              >线下支付</el-dropdown-item>
              <el-dropdown-item
                v-if="$hasMethod('#contract')"
                command="edit"
              >发起合同</el-dropdown-item>
              <el-dropdown-item
                command="eqb"
              >创建e签宝账户与签章</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <custom-page
      ref="customPage"
      :total="total"
      @getList="getList"
    />
    <el-dialog title="设置每天单量" :visible.sync="dialogFormRoll" width="500px">
      <el-form style="text-align: center">
        <el-input v-model="orderCount" type="text" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" style="width: 100px;" />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormRoll = false">取 消</el-button>
        <el-button type="primary" @click="enter1">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { createEQB } from '@/api/audit'
import { getSupplierList, editSupplier,updateSupplierPlatform, closeShopUser, openShopUser, limitQuantity, whetherHandOver, getPlatform } from '@/api/user'
import customPage from '@/components/customPage'
export default {
  components: { customPage },
  props: ['shopname'],
  data() {
    return {
      searchForm: {
        shopname: '',
        account_num: '',
        shop_platform: '',
        status: null
      },
      total: 0,
      tableData: [],
      selectList: [],
      routerName: '',
      dialogFormRoll: false,
      orderCount: ''
    }
  },
  created() {
    // console.log('shopname1',this.$route.query.shopname)
    if (this.$route.query.shopname) {
      this.routerName = this.$route.query.shopname
    }
  },
  mounted() {
    this.getList()
    getPlatform().then((res) => {
      this.selectList = res
    })
  },
  // computed: {
  //   shopname(){
  //     console.log('shopname1',this.$route.query.shopname)
  //   }
  // },
  methods: {
    handleMore(command, item) {
      console.log(command, item)
      // this.selectedItem = item;
      if (command == 'edit') {
        // 编辑资料
        this.$router.push({ name: 'supplierView', params: { viewId: item.id, toEdit: true }})
      } else if (command == 'eqb') {
        createEQB(item.id).then(res => {
          // debugger
        })
      }
    },
    switchWhetherHandOver({ id, is_handover }) {
      whetherHandOver({ userId: id, is_handover: is_handover === 1 ? 0 : 1 }).then((res) => {
        this.$message.success('操作成功')
        this.getList(true)
      })
    },
    changePlatform(shop_platform,id){
      updateSupplierPlatform({
        id,
        shop_platform
      }).then((res) => {
        this.$message.success('操作成功')
        this.getList(true)
      })
    },
    enter1() {
      limitQuantity({ memberId: this.memberId, orderCount: this.orderCount }).then(res => {
        if (res) {
          this.dialogFormRoll = false
          this.$message.success('设置成功')
          this.orderCount = ''
          this.getList(true)
        } else {
          this.$message.success('设置失败')
          this.dialogFormRoll = false
          this.getList(true)
        }
      })
    },
    // 查询
    search() {
      this.$refs.customPage.page = 1
      this.getList()
    },
    // 重置
    reset() {
      this.searchForm = {
        shopname: '',
        account_num: '',
        status: null
      }
      this.routerName = ''
      this.getList()
    },
    // 启用/禁用
    enable(id, endisable) {
      editSupplier({
        id,
        endisable: endisable == 1 ? 2 : 1
      }).then(res => {
        this.getList(true)
      })
    },
    closeShop(row) {
      // console.log(row);
      closeShopUser({ userId: row.id }).then(res => {
        // console.log(res);
        this.$message.success('关闭成功')
        this.getList(true)
      })
    },
    openShop(row) {
      openShopUser({ userId: row.id }).then(res => {
        // console.log(res);
        this.$message.success('开启成功')
        this.getList(true)
      })
    },
    // 限制单量
    limitOrder(row) {
      this.dialogFormRoll = true
      this.memberId = row.id
      this.orderCount = row.order_count
    },
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      this.searchForm.shopname = this.searchForm.shopname || this.routerName
      getSupplierList({ page, pageSize, ...this.searchForm }).then(res => {
        this.tableData = res.data || []
        this.total = res.total
      })
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'supplierView') {
      next(vm => {
        vm.getList()
      })
    } else {
      next()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
